<!--

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kogito Travel Agency</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
    <div class="jumbotron">
        <h1>Kogito Travel Agency</h1>

        <p>Plan your next trip with Kogito Travel Agency, it's easy and fast!</p>
    </div>
    <div class="page-header">
        <div class="row">
            <div class="col-md-12">
                <h1>Travels</h1>
                <button class="pull-right btn btn-primary product-add" data-action="add" data-toggle="modal"
                        data-target="#productModal">
                    <span class="glyphicon glyphicon-plus"></span> Plan new trip
                </button>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Traveller name</th>
                        <th>Destination</th>
                        <th>Dates</th>
                        <th>Visa required</th>
                        <th>Hotel</th>
                        <th>Flight</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    <!-- filled using Ajax -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $.ajaxSetup({
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        $( function() {
            $( "#tripBegin" ).datepicker({
                dateFormat: "yy-mm-dd"
            });
            $( "#tripEnd" ).datepicker({
                dateFormat: "yy-mm-dd"
            });
          } );
        load();
        initModal();
    });

    function create(travelRequest) {
        $.post("/travels", travelRequest, function () {
            load();
        }, "json");
    }

    function remove(id) {
        $.ajax({
            method: "DELETE",
            url: "/travels/" + id
        }).done(function () {
            load();
        });
    }

    function completeTask(id, taskName, taskId) {
        $.post("/travels/" + id + "/" + taskName + "/" + taskId, JSON.stringify({}), function () {
            load();
        }, "json");
    }

    function sendVisaApplication(id, taskName, taskId) {
        $.post("/travels/" + id + "/" + taskName + "/" + taskId, JSON.stringify({'visaApplication': $('#sendVisaApplication').val()}), function () {
            load();
        }, "json");
    }

    function load() {
        $("#content").children().remove();
        $.getJSON("/travels", function (data) {
            $.each(data, function (key, val) {
                $("<tr><td>" + val.traveller.lastName + ", " + val.traveller.firstName + "</td>" +
                "<td>" + val.trip.country + ", " + val.trip.city + "</td>" +
                "<td>" + new Date(val.trip.begin).toLocaleDateString() + " - " + new Date(val.trip.end).toLocaleDateString() + "</td>" +
                "<td>" + (val.trip.visaRequired ? 'Yes' : 'No') + "</td>" +
                "<td>" + (val.hotel != null ? val.hotel.name : '') + "</td>" +
                "<td>" + (val.flight != null ? val.flight.flightNumber : '')  + "</td>" +
                        "<td>" +
                        "<button class='btn btn-primary btn-sm' " +
                        "data-toggle='modal' " +
                        "data-target='#detailsModal' " +
                        "data-firstname='" + val.traveller.firstName + "' " +
                        "data-lastname='" + val.traveller.lastName + "' " +
                        "data-email='" + val.traveller.email + "' " +
                        "data-nationality='" + val.traveller.nationality + "' " +
                        "data-visa-application='" + val.traveller.visaApplication + "' " +
                        "data-country='" + val.trip.country + "' " +
                        "data-city='" + val.trip.city + "' " +
                        "data-begin='" + new Date(val.trip.begin).toLocaleDateString() + "' " +
                        "data-end='" + new Date(val.trip.end).toLocaleDateString() + "' " +
                        "data-hotelname='" + (val.hotel != null ? val.hotel.name : "") + "' " +
                        "data-address='" + (val.hotel != null ? val.hotel.address.street : "") + "' " +
                        "data-bookingnumber='" + (val.hotel != null ? val.hotel.bookingNumber : "") + "' " +
                        "data-phone='" + (val.hotel != null ? val.hotel.phone : "") + "' " +
                        "data-flightnumber='" + (val.flight != null ? val.flight.flightNumber : "") + "' " +
                        "data-arrival='" + (val.flight != null ? new Date(val.flight.arrival).toLocaleString() : "") + "' " +
                        "data-departure='" + (val.flight != null ? new Date(val.flight.departure).toLocaleString() : "") + "' " +
                        "data-id='" + val.id + "'>" +
                        "   <span>Details</span>" +
                        "</button>&nbsp;" +
                        "<button class='btn btn-primary btn-sm' " +
                        "data-toggle='modal' " +
                        "data-target='#tasksModal' " +
                        "data-firstname='" + val.traveller.firstName + "' " +
                        "data-lastname='" + val.traveller.lastName + "' " +
                        "data-id='" + val.id + "'>" +
                        "   <span>Tasks</span>" +
                        "</button>&nbsp;" +
                        "<button class='btn btn-danger btn-sm product-delete' data-id='" + val.id + "'>" +
                        "   <span>Cancel</span>" +
                        "</button>" +
                        "</td>" +
                        "</tr>").appendTo("#content");
            });
            initCallbacks();
        });
    }

    function initCallbacks() {
        $(".product-delete").unbind().click(function() {
           var id = $(this).data("id");
           remove(id);
        });

    }

    function initModal() {
        $("#productModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var productAction = $("#productAction");
            productAction.unbind();
            var modal = $(this);
            modal.find('.modal-title').text("Plan new trip");
            modal.find('#firstName').val("");
            modal.find('#lastName').val("");
            modal.find('#email').val("");
            modal.find('#nationality').val("");

            modal.find('#street').val("");
            modal.find('#city').val("");
            modal.find('#zipCode').val("");
            modal.find('#country').val("");

            modal.find('#destinationCountry').val("");
            modal.find('#destinationCity').val("");
            modal.find('#tripBegin').val("");
            modal.find('#tripEnd').val("");

            productAction.click(function () {

                var address = {street: $("#street").val(), city: $("#city").val(), zipCode: $("#zipCode").val(), country: $("#country").val()};
                var traveller = {firstName: $("#firstName").val(), lastName: $("#lastName").val(), email: $("#email").val(), nationality: $("#nationality").val(), address: address};
                var trip = {country: $("#destinationCountry").val(), city: $("#destinationCity").val(), begin: $("#tripBegin").val() + 'T00:00:00.000+02:00', end: $("#tripEnd").val() + 'T00:00:00.000+02:00'};
                var travelRequest = JSON.stringify({traveller: traveller, trip: trip});

                create(travelRequest);
                $('#productModal').modal('toggle');
            });

        })

        $("#detailsModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var modal = $(this);
            modal.find('.modal-title').text("Details of travel for " + button.data("lastname") + ", " + button.data("firstname"));
            modal.find('#firstName').val(button.data("firstname"));
            modal.find('#lastName').val(button.data("lastname"));
            modal.find('#email').val(button.data("email"));
            modal.find('#nationality').val(button.data("nationality"));
            if(button.data("visa-application") !== null && button.data("visa-application") !== '') {
                $('#visa-application-group').show();
                modal.find('#visaApplication').attr('href', button.data("visa-application"));
            } else {
                $('#visa-application-group').hide();
                modal.find('#visaApplication').attr('href', '#');
            }
            modal.find('#destinationCountry').val(button.data("country"));
            modal.find('#destinationCity').val(button.data("city"));
            modal.find('#tripBegin').val(button.data("begin"));
            modal.find('#tripEnd').val(button.data("end"));

            modal.find('#hotelname').val(button.data("hotelname"));
            modal.find('#bookingNumber').val(button.data("bookingnumber"));
            modal.find('#address').val(button.data("address"));
            modal.find('#phone').val(button.data("phone"));

            modal.find('#flightNumber').val(button.data("flightnumber"));
            modal.find('#departure').val(button.data("departure"));
            modal.find('#arrival').val(button.data("arrival"));
        })

        $("#tasksModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var travelId = button.data('id');
            var modal = $(this);
            modal.find('.modal-title').text("Tasks for " + button.data("lastname") + ", " + button.data("firstname"));

            $("#taskscontent").children().remove();
            $.getJSON("/travels/"+ travelId + "/tasks", function (data) {
                $.each(data, function (index, task) {
                    let taskId = task.id;
                    let taskName = task.name;
                    let element = "<tr><td>" + taskName + "</td><td>";
                    if (taskName === 'VisaApplication') {
                        element += "<div class='form-group'><label for='sendVisaApplication'>Link to visa application</label><input class='form-control' type='text' id='sendVisaApplication' name='sendVisaApplication' required></div>" +
                        "<button class='btn btn-primary btn-sm' onclick=\"sendVisaApplication('" + travelId + "', '" + taskName + "', '" + taskId + "')\" data-dismiss=\"modal\" " +
                        "   <span>Send</span>" +
                        "</button>";
                    } else {
                        element += "<button class='btn btn-primary btn-sm' onclick=\"completeTask('" + travelId + "', '" + taskName + "', '" + taskId + "')\" data-dismiss=\"modal\" " +
                        "   <span>Complete</span>" +
                        "</button>";
                    }
                    element +=	"</td></tr>";
                    $(element).appendTo("#taskscontent");
                });
        })
    })
    }
</script>
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="productModalTitle">Plan new trip</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                        <div class="row">
                            <h3>Traveller</h3>
                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="firstName">First Name</label> <input type="text"
                                        class="form-control" id="firstName" name="firstName" required>
                                </div>
                                <div class="form-group">
                                    <label for="lastName">Last Name</label> <input type="text"
                                        class="form-control" id="lastName" name="lastName" required>
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label> <input type="text"
                                        class="form-control" id="email" name="email" required>
                                </div>
                                <div class="form-group">
                                    <label for="nationality">Nationality</label> <input
                                        type="text" class="form-control" id="nationality"
                                        name="nationality" required>
                                </div>

                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <label for="street">Street</label> <input type="email"
                                        class="form-control" id="street" name="street" required>
                                </div>
                                <div class="form-group">
                                    <label for="city">City</label> <input type="text"
                                        class="form-control" id="city" name="city" required>
                                </div>
                                <div class="form-group">
                                    <label for="zipCode">Zip code</label> <input type="text"
                                        class="form-control" id="zipCode" name="zipCode" required>
                                </div>
                                <div class="form-group">
                                    <label for="country">Country</label> <input type="text"
                                        class="form-control" id="country" name="country" required>
                                </div>
                            </div>

                            <h3>Trip</h3>
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label for="destinationCountry">Country</label> <input type="text"
                                        class="form-control" id="destinationCountry" name="destinationCountry" required>
                                </div>
                                <div class="form-group">
                                    <label for="destinationCity">City</label> <input type="text"
                                        class="form-control" id="destinationCity" name="destinationCity" required>
                                </div>
                                <div class="form-group">
                                    <label for="tripBegin">Begin at</label> <input type="text"
                                        class="form-control" id="tripBegin" name="tripBegin" required>
                                </div>
                                <div class="form-group">
                                    <label for="tripEnd">End at</label> <input
                                        type="text" class="form-control" id="tripEnd"
                                        name="tripEnd" required>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default"
                                    data-dismiss="modal">Cancel</button>
                                <button type="button" id="productAction" class="btn btn-primary">Book your trip</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <h3>Traveller</h3>
                                </div>
                                <div class="form-group">
                                    <label for="firstName">First Name</label> <input type="text"
                                        class="form-control" id="firstName" name="firstName" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="lastName">Last Name</label> <input type="text"
                                        class="form-control" id="lastName" name="lastName" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label> <input type="text"
                                        class="form-control" id="email" name="email" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="nationality">Nationality</label> <input
                                        type="text" class="form-control" id="nationality"
                                        name="form-control" readonly>
                                </div>
                                <div id="visa-application-group" class="form-group">
                                    <label for="visaApplication">Visa application</label>
                                    <p>
                                        <a href="#" id="visaApplication" target="_blank" >Link to visa application</a>
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <h3>Trip</h3>
                                </div>
                                <div class="form-group">
                                    <label for="destinationCountry">Country</label> <input type="text"
                                        class="form-control" id="destinationCountry" name="destinationCountry" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="destinationCity">City</label> <input type="text"
                                        class="form-control" id="destinationCity" name="destinationCity" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="tripBegin">Begin at</label> <input type="text"
                                        class="form-control" id="tripBegin" name="tripBegin" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="tripEnd">End at</label> <input
                                        type="text" class="form-control" id="tripEnd"
                                        name="tripEnd" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <h3>Hotel</h3>
                                </div>
                                <div class="form-group">
                                    <label for="hotelname">Name</label> <input type="text"
                                        class="form-control" id="hotelname" name="hotelname" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="bookingNumber">Booking Number</label> <input type="text"
                                        class="form-control" id="bookingNumber" name="bookingNumber" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="address">Address</label> <input type="text"
                                        class="form-control" id="address" name="address" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="phone">Phone</label> <input type="text"
                                        class="form-control" id="phone" name="phone" readonly>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6 col-xs-6">
                                <div class="form-group">
                                    <h3>Flight</h3>
                                </div>
                                <div class="form-group">
                                    <label for="flightNumber">Flight number</label> <input type="email"
                                        class="form-control" id="flightNumber" name="flightNumber" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="departure">Departure</label> <input type="text"
                                        class="form-control" id="departure" name="departure" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="arrival">Arrival</label> <input type="text"
                                        class="form-control" id="arrival" name="arrival" readonly>
                                </div>
                                <div class="form-group">
                                    &nbsp;
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<div class="modal fade" id="tasksModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                        <div class="row">

                            <div class="col-md-12">
                                <h1>Tasks</h1>
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>Task name</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody id="taskscontent">
                                    <!-- filled using Ajax -->
                                    </tbody>
                                </table>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>